<template>
    <div class="app-container">
        <el-row :gutter="5" class="row_el">
            <el-col :span="5" :xs="24">
                <el-card shadow="never" class="projectCard">
                    <div class="projectManage">
                            <el-tabs v-model="ownType" @tab-click="handleClick" >
                                <el-tab-pane label="机构项目" name="1"><project-list :projectList="porpData.projectListData1" :projectType="1" @listenProject="showProject" @on-return-data="onReturn" /></el-tab-pane>
                                <el-tab-pane label="参与项目" name="2"><project-list :projectList="porpData.projectListData2" :projectType="2" @listenProject="showProject" @on-return-data="onReturn"  /></el-tab-pane>
                                <!-- <el-tab-pane label="所有项目" name="3"><project-list :projectList="porpData.projectListData3" :projectType="3" @listenProject="showProject" @on-return-data="onReturn"  /></el-tab-pane> -->
                            </el-tabs>   
                            <div class="addPro">
                                <el-button type="primary" icon="el-icon-plus" size="small" @click="handleAdd($event)">新建项目</el-button>
                            </div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="19" :xs="24">
                <el-tabs type="border-card" class="border-card">
                    <el-tab-pane label="分区/场地">
                        <prozone :formData="projectDatail" :userOptions="userOptions" />
                    </el-tab-pane>
                    <el-tab-pane label="项目详情">
                        <prodetail :formData="projectDatail" :userOptions="userOptions" @updateProject = "updateSave"/>
                    </el-tab-pane>
                    <el-tab-pane label="污染物统计">
                        <propollute  :formData="projectDatail"   />
                    </el-tab-pane>
                </el-tabs>
            </el-col>
        </el-row>
        <!-- 添加或修改项目配置对话框 -->
        <el-dialog
            :title="title"
            :visible.sync="openProject"
            :close-on-click-modal="false"
            custom-class="addAgency"
            append-to-body>
        <div class="formbox">
            <el-form
                ref="form"
                :model="form"
                :rules="rules"
                label-width="120px"
            >
                <el-form-item
                    label="项目id"
                    prop="projectId"
                    v-show="false"
                >
                <el-input v-model="form.projectId" />
                </el-form-item>
                    <el-row>
                            <el-form-item
                                    label="项目名称"
                                    prop="projectName">
                                    <el-col :span="22">
                                        <el-input
                                            v-model="form.projectName"
                                            placeholder="请输入项目名称"
                                        />
                                    </el-col>
                            </el-form-item>
                    </el-row>    
                    <el-row>
                            <el-form-item
                                label="项目类型"
                                prop="projectType"
                            >
                            <el-col :span="8">
                                <el-select v-model="form.projectType" filterable placeholder="请选择" >
                                    <el-option
                                        v-for="item in proTypeOptions"
                                        :key="item.id"
                                        :label="item.label"
                                        :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-col>
                            </el-form-item>
                    </el-row>
                     <el-row>
                            <el-form-item
                                label="负责人"
                                prop="userId"
                            >
                            <el-col :span="8">
                            <el-select v-model="form.userId" filterable @change="resetUserInfo($event)" placeholder="请选择"  >
                                        <el-option
                                            v-for="item in userOptions"
                                            :key="item.id"
                                            :label="item.label"
                                            :value="item.id">
                                            </el-option>
                                        </el-select>
                            </el-col>
                            </el-form-item>
                    </el-row>
                    <el-row :gutter="20">
                            <el-form-item
                                label="项目周期"
                                prop="date"
                            >
                            <el-col :span="11">
                                <el-date-picker type="date" value-format="yyyy-MM-dd" placeholder="开始日期" v-model="form.beginDate" style="width: 100%;"></el-date-picker>
                            </el-col>
                            <el-col :span="11">
                                <el-date-picker type="date" value-format="yyyy-MM-dd" placeholder="截至日期" v-model="form.endDate" style="width: 100%;"></el-date-picker>
                             </el-col>
                            </el-form-item>
                       
                    </el-row>
                    <el-row :gutter="20">
                            <el-form-item
                                label="涉及范围/m^2"
                                prop="acreage"
                            >
                            <el-col :span="22"> 
                            <el-input
                                v-model="form.acreage"
                                placeholder="请输入区域面积/m^2" />
                            </el-col>
                            </el-form-item>
                    </el-row>
                    <el-row>
                        <el-col>
                            <el-form-item
                                label="项目描述"
                                prop="projectDesc"
                            >
                            <el-col :span="22"> 
                            <el-input
                                type="textarea"
                                :rows="2"
                                placeholder="请输入内容"
                                v-model="form.projectDesc">
                                </el-input>
                            </el-col>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <!-- <el-form-item label="上传">
                        <el-upload ref="upload" :file-list="form.fileList" 
                        :on-success="handleChange"
                        :headers="headerToken"
                        :action="field102Action" 
                        :on-preview="handlePreview"
                        :before-remove="beforeRemove"
                        :on-remove="handleRemove" 
                        >
                            <el-button slot="trigger" size="small" type="primary">上传文件</el-button>
                        </el-upload>
                    </el-form-item> -->   
            </el-form>
            </div>
            <div
                slot="footer"
                class="dialog-footer"
            >
                <el-button
                    type="primary"
                    @click="submitForm"
                >确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { listProject,addProject,getProject,updateProject} from "@/api/project/project";
import { saveAs } from 'file-saver'
import { listUserAll,delFile} from "@/api/system/user";
import { listAgencyAll } from "@/api/system/agency";
import { getToken } from "@/utils/auth";
export default {
    name: "project",
    components: { projectList:() => import('./projectList'),
                    prodetail:() => import('./components/proDetail'),
                    prozone:() => import('./components/proZone'),
                    proupload:() => import('./components/proUpload'),
                    propollute:()=>import('./components/proPollute')
            },
    data() {
        return {
            headerToken:{},
            ownType:"1",
            //项目列表
            projectListData:[],
            //项目详情
            projectDatail:{},
            //传入子组件数据列表
            porpData:{
                projectListData1:[],
                projectListData2:[],
                projectListData3:[]
            },
            // 遮罩层
            loading: false,
            // 是否显项目示弹出层
            openProject: false,
            // 机构下拉
            agencyOptions:[],
            //设备类型options
            deviceOptions:this.$store.getters.deviceType,
            //项目类型
            proTypeOptions:[{"id": "0","label": "路探"},
             {"id": "1","label": "场地污染"}],
            //工艺选项
            methodOptions:this.$store.getters.methodsOptions,
            //用户选择Options
            userOptions:[],
            // 选中数组
            ids: [],
            //上传文件地址
            field102Action: '/dev-api/zotask/uploadFile',
            // 非多个禁用
            multiple: true,
            // x项目弹出层标题
            title: "",
            // 是否显示弹出层（数据权限）
            openDataScope: false,
            menuExpand: false,
            menuNodeAll: false,
            deptExpand: true,
            deptNodeAll: false,
            //分区tag
            zoneNa:"",
            // 项目表单参数
            form: {
                //自定义参数
                zoneNames:[]
            },
            // 表单校验
            rules: {
                projectName: [
                    { required: true, message: "项目名称不能为空", trigger: "blur" }
                ],
                projectType: [
                    { required: true, message: "项目类型必须选择", trigger: "blur" }
                ],
                userId: [
                    { required: true, message: "项目负责人不能为空", trigger: "blur" }
                ]
            },
          
        };

    },
    created() {
        this.headerToken['GeomativeAuthorization']='Geomative ' + getToken();
        let projectIdroute= this.$route.params.projectId;
        if(projectIdroute){
            console.log(projectIdroute)
             getProject(proData.projectId).then(
                    response=>{
                        this.projectDatail = response.data;
                        // this.projectDatail.addressOptions = JSON.parse(response.data.addressOption)
                    }
                )
        }
        this.getProList();
        this.getOptionsUser();
      
    },
    methods: {

        //获取子组件传过来的项目信息
        showProject(proData){
            if(proData!=undefined){
                getProject(proData.projectId).then(
                    response=>{
                        this.projectDatail = response.data;
                        // this.projectDatail.addressOptions = JSON.parse(response.data.addressOption)
                    }
                )
            }
        },
        //子组件要求重新获取列表
        onReturn(val){
            this.getProList()
        },
        //点击标签
        handleClick(tab, event){
            this.activeName = tab.name
            this.getProList(); 
        },
        // 获取项目数据
        getProList() {
            listProject(this.ownType).then(
                response => {
                    if(this.ownType=="1"){
                        this.porpData.projectListData1=response.data
                    }
                    else if(this.ownType=="2"){
                        this.porpData.projectListData2=response.data
                    }
                    else{
                        this.porpData.projectListData3=response.data
                    }
                    this.projectListData = response.data;
                }
            );
        },
        //获取机构用户列表，并转为options数据
        getOptionsUser(){
            const Params = {
                pageNum: 1,
                pageSize: 10000};
            listUserAll().then(
                response => {
                    this.userOptions = response.data.map(item => { return {"id":item["userId"],"label":item["userName"],"telephone":item["telephone"],"agencyId":item["agencyId"]} })  
                }
            );
            listAgencyAll().then(
                response => {
                    this.agencyOptions = this.resetOptions(response.data,"agencyId","agencyName");
                }
            )
        },
        //用户选择联动
        resetUserInfo(value){
            const valueObj= this.userOptions.find((item)=>{return item.id === value;});
            this.form.userName = valueObj.label;
            this.form.phonenumber = valueObj.telephone;
            this.form.agencyId = valueObj.agencyId
        },
        //删除文件
        beforeRemove(file, fileList){
            // return this.$confirm(`确定移除 ${ file.name }？`);
            return this.$confirm( `是否确认删除此文件?`, "警告", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })  
        },
        //删除文件
        handleRemove(file, fileList) {
            this.form.fileList.forEach((item,index)=>{
                if(item.uid===file.uid){
                    this.form.fileList.splice(index,1);
                }
            })
            delFile(file);
        },
        //下载文件
        handlePreview(file) {
            saveAs(file.url, file.name)
        },
        //文件上传成功改变
        handleChange(response,file, fileList){
            this.form.fileList.push(response.data[0]);
        },
        // 项目表单重置
        reset() {
            this.menuExpand = false,
            this.menuNodeAll = false,
            this.deptExpand = true,
            this.deptNodeAll = false,
            this.form = {
                zoneNames:[],
                projectId: undefined,

                address:undefined,
                projectName: undefined,
                purpose:undefined,
                methodDesignId:undefined,
                methodDesign:undefined,
                siteType:undefined,
                userId:undefined,
                userName:undefined,
                phonenumber:undefined,
                method:undefined,
                acreage:undefined,
                createName:undefined,
                createTime:undefined,
                fileList:[],
                agencyId:undefined,
            };
            this.resetForm("form");
        },
        //重置分区表单
        resttask(){
             this.taskForm = {
                zoneName:undefined,
                zoneId:undefined,
                taskId:undefined,
                methodDesignId:undefined,
                tasksName:undefined,
                assignType:undefined,
                assignIds:undefined,
                assignName:undefined,
                state:undefined,
             }
            this.resetForm("zoneForm");
        },
        /** 新增项目按钮操作 */
        handleAdd() {
            if(!this.$store.getters.permissions.includes("*:*:*")&&!this.$store.getters.permissions.includes('project:project:add')){
                this.Message({
                    message:"无权限!",
                    type:'error'
                })
                return;
            }
            this.reset();
            this.openProject = true;
            this.title = "新增项目";
        },
        /** 项目修改按钮操作 */
        handleUpdateProject(proId) {
            if(!this.$store.getters.permissions.includes("*:*:*")&&!this.$store.getters.permissions.includes('project:project:update')){
                this.Message({
                    message:"无权限!",
                    type:'error'
                })
                return;
            }
            this.reset();
            getProject(proId).then(response => {
                this.form = response.data;
                this.openProject = true;
                this.title = "修改项目详情";
            });
        },
        created() {
            this.getZoneList();
        },
        /** 项目编辑和新建提交按钮 */
        submitForm() {
            this.$refs["form"].validate(valid => {
                if (valid) {
                    if (this.form.projectId != undefined) {
                        updateProject(this.form).then(response => {
                            this.msgSuccess("修改成功");
                            this.openProject = false;
                            this.getProList();
                        });
                    } else {
                        addProject(this.form).then(response => {
                            this.msgSuccess("添加成功");
                            this.openProject = false;
                            this.getProList();
                        });
                    }
                }
            })
        },
        //更新保存
        updateSave(data){
            updateProject(data).then(response => {
                this.msgSuccess("修改成功");
                this.openProject = false;
                this.getProList();
            });
        },
        // 取消按钮
        cancel() {
            this.openProject = false;
            this.reset();
        },
        
     }
}
</script>
<style scoped>
.description {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
    margin-block-end: 0px;
    margin-block-start: 0px;
}

.clearfix .el-form-item {
    margin-bottom: 5px;
}
.clearfix:before,
.clearfix:after {
    display: table;
    content: ""; /*不用有内容也可以*/
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}
.delete {
    margin-top: 25px;
    margin-left: 1px;
}
.formbox{
    /* padding:20px 20px; */
}
.projectManage{
    height: 100%;
    width: 100%;
    background: white;
}
.addPro{
    text-align: center;
}
.addPro button{
    display: inline-block;
    margin-top: 15px;
}
.projectCard ul{
    margin: 0px 0px;
}
.proDatail .el-card__body{
    padding: 0px 0px;
}
.list-group-item{
    border: none;
    padding: 8px 0px;
}
.list-group-item label{
    display: inline-block;
    width: 25%;
    text-align: right;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.list-group-item .pull-left{
    margin-left: 7%;
    display: inline-block;
    text-align: left;
    width: 68%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.DatailCard{
    padding: 0px 6px;
}
.proDatail{
    margin-top: 30px;
    padding-bottom: 15px;
}

.otherInfo,.proInfo{
    padding:0px 40px;
}
.el-tag + .el-tag {
    margin-left: 10px;
    margin-bottom: 10px;
}
.unfin{
    color: #FFAB76;
}
.fin{
    color: #62D566;
}
.asss,.unass{
    color: white;
    font-size: 10px !important;
    padding: 2px;
    border-radius: 2px;
}
.asss{
    
    background:#62D566 ;
    
}
.unass{
  background: #FFAB76;
}
.select-assign{
    width: 70%;
}
.border-card{
    -webkit-box-shadow: 0 0 0 0 rgb(0 0 0 / 12%), 0 0 0 0 rgb(0 0 0 / 4%);
    box-shadow: 0 0 0 0 rgb(0 0 0 / 12%), 0 0 0 0 rgb(0 0 0 / 4%);
}
</style>

